<template>
  <div class="footer-box">
    <div class="footer-conner">
      <img src="@/assets/icon/logo.svg" style="width: 427px;height: 64px;" alt="logo">
      <div class="footer-item">
        <div class="company" v-if="coontactUs">
          <p class="title">联系我们</p>
          <p class="describe">
            <el-icon>
              <location/>
            </el-icon>
            &nbsp;&nbsp;
            {{coontactUs.children[0].indexName}}
          </p>       
          <p class="describe">
            <el-icon>
              <phone-filled/>
            </el-icon>
            &nbsp;&nbsp;
            {{coontactUs.children[0].indexContent}}
          </p>
          <p class="describe">
            <el-icon>
              <Message/>
            </el-icon>
            &nbsp;&nbsp;
             marketing@loreage.com
          </p>
          
          <p class="title">友情链接</p>
          <p class="describe link-describe" v-if="blogroll">
            <a
              v-for="(item,index) in blogroll.children"
              :key="index"
              @click="to(item.indexContent)"
            >{{item.indexName}}</a>
          </p>
        </div>
        <div class="qr-code" v-if="qrList">
          <div class="qr-box" v-for="(item,index) in qrList.children" :key="index">
            <div class="code-item">
              <img :src="returnImg(item.indexImg)" :alt="item.indexName">
            </div>
            <span>{{item.indexName}}</span>
          </div>
        </div>
      </div>
    </div>
    <p class="icp">
      <a href= "https://beian.miit.gov.cn/" rel="noreferrer\" target="_blank\">京ICP备2023000612号-1</a >
      <img src="../../assets/img/WechatIMG697.jpg" alt="">
      <a href= "https://beian.mps.gov.cn/#/query/webSearch?code=11010202010770\" rel="noreferrer\" target="_blank\">京公网安备11010202010770</a >
    </p>
  </div>
</template>
<script>
import { getFooter } from "@/api/PC-Home";
export default {
  data() {
    return {
      coontactUs: null,
      blogroll: null,
      qrList: null
    };
  },
  mounted() {
    this.getFooter();
  },
  methods: {
    returnImg(url) {
      return process.env.VUE_APP_URL + "/" + url;
    },
    getFooter() {
      getFooter().then(res => {
        let data = res.data;
        data.map(item => {
          if (item.id === "601") {
            this.coontactUs = item;
          }
          if (item.id === "602") {
            this.blogroll = item;
          }
          if (item.id === "603") {
            this.qrList = item;
          }
        });
      });
    },
    to(item) {
      window.open(item)
    }
  }
};
</script>
<style scoped lang="scss">
.footer-box {
  width: 100%;
  height: 370px;
  display: flex;
  flex-direction: column;
  background: #151c32;

  .footer-conner {
    width: 100%;
    height: 320px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    padding: 40px 120px;
    display: flex;
    flex-direction: column;

    .footer-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .company {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .title {
          font-size: 14px;
          color: #ffffff;
          letter-spacing: 0;
          margin-top: 15px;

          &:first-child {
            margin-top: 0;
          }
        }

        .describe {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
          letter-spacing: 0;
          margin-top: 16px;
          display: flex;
          align-items: center;
        }

        .link-describe {
          margin-top: 8px;
          a {
            margin-right: 10px;
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 0;
            opacity: 0.6;
            cursor: pointer;
          }
        }
      }

      .qr-code {
        display: flex;
        flex-direction: row;
        .qr-box {
          display: flex;
          flex-direction: column;
          .code-item {
            width: 128px;
            height: 128px;
            background: #ffffff;
            border-radius: 2px;
            border-radius: 2px;
            margin-left: 40px;
            padding: 10px;
            box-sizing: border-box;
            img {
              width: 100%;
              height: auto;
            }
          }
          span {
            opacity: 0.8;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
            margin-left: 40px;
            margin-top: 16px;
          }
        }
      }
    }
  }

  .icp {
    width: 100%;
    height: 48px;
    font-size: 16px;
    // color: #8c9bb3;
    color: rgba(255, 255, 255, 0.6);
    line-height: 48px;
    text-align: center;
    img{
      width: 20px;
      margin-right: 10px;
      margin-left: 50px;
      margin-top: -4px;
    }
    a{
      color: rgba(255, 255, 255, 0.6);
      &:hover{
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
      }
    }
  }
}
@media only screen and (max-device-width: 768px) {
  .footer-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #151c32;

    .footer-conner {
      width: 100%;
      height: auto;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      box-sizing: border-box;
      padding: 40px 20px;
      display: flex;
      flex-direction: column;
      img{
        width: 100% !important;
      }

      .footer-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .company {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .describe {
            font-size: 12px;

          }

          .link-describe {
            margin-top: 8px;
            a {
              margin-right: 10px;
              font-size: 16px;
              color: #ffffff;
              letter-spacing: 0;
              opacity: 0.6;
            }
          }
        }

        .qr-code {
          display: flex;
          flex-direction: row;
          margin-top: 20px;
          .qr-box {
            display: flex;
            flex-direction: column;
            .code-item {
              width: 128px;
              height: 128px;
              background: #ffffff;
              border-radius: 2px;
              border-radius: 2px;
              margin-left: 0px;
              padding: 10px;
              box-sizing: border-box;
              img {
                width: 100%;
                height: auto;
              }
            }
            span {
              margin-left: 0px;
            }
          }
        }
      }
    }

    .icp {
      width: 100%;
      height: 48px;
      font-size: 16px;
      color: #8c9bb3;
      line-height: 48px;
      text-align: center;
    }
  }
}
</style>